<template>
    <div>
        <my-nav-bar
            title="数字很溜"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2>
            <my-count :endnum="endnum" ref="demoCountup1" duration="200"></my-count>
            <my-button size="small" @click.native="pauseResume">{{pause ? '继续' : '暂停'}}</my-button>
        </h2>
        <h2>
            <my-count :endnum="endnum" ref="demoCountup2"></my-count>
            <my-button size="small" @click.native="reset">重置</my-button>
            <my-button size="small" @click.native="start" type="warning" v-show="showBtn">重新开始</my-button>
        </h2>

        <h2>
            <my-count
                :endnum="endnum"
                duration="3"
                decimals="2"
                separator=","
                prefix="$"
                suffix="美元"
            ></my-count>
        </h2>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                endnum: 12345,
                showBtn: false,
                pause: false
            }
        },
        methods: {
            onClickLeft() {
                this.$router.$go(-1)
            },

            onClickRight() {
                console.log("right");
            },

            pauseResume() {
                this.pause = !this.pause;
                this.$refs.demoCountup1.instance.pauseResume();
            },
            reset() {
                this.showBtn = true;
                this.$refs.demoCountup2.instance.reset();
            },
            start() {
                this.$refs.demoCountup2.instance.start();
            }
        }
    }
</script>
